<template>
  <div class="article-wrap">
    <!-- 头部 -->
    <van-nav-bar
      class="article-header"
      title="文章详情"
      left-arrow
      @click-left="$router.back()"
      @click-right="onClickRight"
    >
      <template #right>
        <van-icon name="ellipsis" size="25" />
      </template>
    </van-nav-bar>
    <!-- 内容 -->
    <div class="article-content-wrap">
      <h1 class="article-title">{{ DetailsDate.title }}</h1>
      <van-cell center>
        <div slot="icon">
          <van-image round class="article-image" :src="DetailsDate.aut_photo" />
        </div>
        <div slot="title">{{ DetailsDate.aut_name }}</div>
        <div slot="label">{{ DetailsDate.pubdate | relativeTime }}</div>
        <van-button
          type="info"
          round
          :loading="isLoading"
          style="height: 30px"
          :icon="DetailsDate.is_followed ? '' : 'plus'"
          @click="handleFollow"
        >
          {{ DetailsDate.is_followed ? "已关注" : "关注" }}
        </van-button>
      </van-cell>
      <!-- 正文 -->
      <div
        class="markdown-body"
        v-html="DetailsDate.content"
        ref="markdownRef"
      ></div>
      <!-- 评论内容 -->
      <ArticleList
        :id="id"
        :list="list"
        @handleTotalCount="totalCount = $event"
        @handleIsReply="handleIsReply"
      />
    </div>

    <!-- 底部 -->
    <van-cell class="Article-footer">
      <div slot="title" @click="isShowReply = true">
        <van-button round style="width: 160px; height: 30px">写评论</van-button>
      </div>
      <div class="icon-size">
        <van-icon name="comment-o" :badge="totalCount" />
        <van-icon
          :name="DetailsDate.is_collected ? 'star' : 'star-o'"
          :color="DetailsDate.is_collected ? 'yellow' : ''"
          @click="onCollected"
        />
        <van-icon
          :name="DetailsDate.attitude == 1 ? 'good-job' : 'good-job-o'"
          :color="DetailsDate.attitude == 1 ? 'yellow' : ''"
          @click="onLikings"
        />
        <van-icon name="share" />
      </div>
    </van-cell>

    <!--写评论 -->
    <van-popup v-model="isShowReply" position="bottom">
      <postComment :target="id" @postDate="postDate" />
    </van-popup>

    <!-- 回复 -->
    <van-popup v-model="isShows" position="bottom">
      <relyComment
        :replyDate="replyDate"
        @closeRely="isShows = false"
        v-if="isShows"
        :id="id"
        @postDate="postDate"
      />
    </van-popup>
  </div>
</template>
<script>
import {
  getFollowings,
  unGetFollowings,
  addCollections,
  deleteCollections,
  addLikings,
  deleteLikings
} from '../../api/following'

import postComment from './components/post-comment.vue'
import relyComment from './components/rely-comment.vue'
import { getArticleDetails } from '@/api/user'
import { ImagePreview } from 'vant'
import ArticleList from './components/article-list.vue'
import './github-markdown.css'
import ArticleItme from './components/article-itme.vue'
export default {
  name: 'Article',
  components: {
    ArticleList,
    postComment,
    relyComment,
    ArticleItme
  },
  data () {
    return {
      DetailsDate: [], // 详情页数据
      isLoading: false,
      isShowReply: false, // 是否打开写评论
      list: [], // 评论中的数据（放到父组件中方便使用）
      totalCount: 0, // 评论总数
      isShows: false, // 是否打开回复
      replyDate: [] // 回复的头部数据
    }
  },
  props: {
    id: {
      // 文章id
      type: [Number, Object, String],
      required: true
    }
  },
  created () {
    this.getDetails()
  },
  methods: {
    /* 获取详情页数据 */
    async getDetails () {
      const { data } = await getArticleDetails(this.id)
      this.DetailsDate = data.data
      this.$nextTick(() => {
        this.handleProviewImg()
      })
    },

    /* 图片预览 */
    handleProviewImg () {
      const body = this.$refs.markdownRef // 获取文章的dom容器
      const value = body.querySelectorAll('img') // 得到所有的img标签
      const valueImg = [] // 收集所有的scr
      value.forEach((img, index) => {
        valueImg.push(img.src)
        img.onclick = function () {
          // 为每一个图片添加一个点击事件
          ImagePreview({
            images: valueImg, // 需要预览的图片 URL 数组
            startPosition: index, // 图片预览起始位置索引
            loop: false // 是否循环播放
          })
        }
      })
    },

    // 是否关注
    async handleFollow () {
      this.isLoading = true
      if (this.DetailsDate.is_followed) {
        // 有id 取消关注
        await unGetFollowings(this.DetailsDate.aut_id)
      } else {
        // 没有id 关注
        const body = {
          target: this.DetailsDate.aut_id
        }
        await getFollowings(body)
      }
      // 修改当前状态
      this.DetailsDate.is_followed = !this.DetailsDate.is_followed
      this.isLoading = false
    },

    // 是否收藏
    async onCollected () {
      this.$toast.loading({
        message: '操作中...',
        forbidClick: true // 禁止背景点击
      })
      if (this.DetailsDate.is_collected) {
        // 有id 取消收藏
        await deleteCollections(this.id)
        this.$toast.success('已取消收藏')
      } else {
        // 没有id 收藏文章
        const body = {
          target: this.id
        }
        await addCollections(body)
        this.$toast.success('收藏成功')
      }
      // 修改当前状态
      this.DetailsDate.is_collected = !this.DetailsDate.is_collected
    },

    // 是否点赞
    async onLikings () {
      this.$toast.loading({
        message: '操作中...',
        forbidClick: true // 禁止背景点击
      })
      if (this.DetailsDate.attitude === 1) {
        // 有id 取消点赞
        await deleteLikings(this.id)
        this.DetailsDate.attitude = -1
        this.$toast.success('已取消点赞')
      } else {
        // 没有id 收藏文章
        const body = {
          target: this.id
        }
        await addLikings(body)
        this.DetailsDate.attitude = 1
        this.$toast.success('点赞成功')
      }
      // 修改当前状态
    },

    onClickLeft () {
      console.log('返回')
    },

    onClickRight () {
      console.log('按钮')
    },

    postDate (item) {
      this.list.unshift(item)
      this.totalCount++ // 更新评论总数
      this.isShowReply = false // 关闭写评论
    },

    handleIsReply (item) {
      this.isShows = true // 展示回复内容
      // console.log('item',item)
      this.replyDate = []
      this.replyDate.push(item)
    }
  }
}
</script>
<style scoped lang='less'>
.article-wrap {
  .article-header {
    background-color: #3296fa;
    /deep/.van-icon {
      color: white;
    }
    /deep/.van-nav-bar__title {
      color: white;
    }
  }
  .article-content-wrap {
    position: fixed;
    top: 48px;
    right: 0;
    left: 0;
    bottom: 62px;
    overflow-y: auto;
  }
  .article-title {
    background: white;
    font-size: 20px;
    color: #3a3a3a;
    padding: 14px;
    margin: 0;
  }
  .article-image {
    width: 30px;
    height: 30px;
    margin-right: 5px;
  }
  .markdown-body {
    padding: 10px;
    background: white;
  }
  .icon-size {
    font-size: 26px;
    display: flex;
    height: 42px;
    justify-content: space-around;
    align-items: center;
  }
  /deep/.van-cell__title {
    padding-top: 5px;
  }
  .Article-footer {
    position: fixed;
    bottom: 0;
  }
}
</style>
